<template>
  <view style="height: 100%">
    <s-nav title="便民服务"></s-nav>
    <s-content>
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <s-card>
          <view class="no-margin">
            <uni-forms-item
              label="申请事项"
              name="applicationItems"
              required
              label-width="80"
            >
              <uni-easyinput
                v-model="formData.applicationItems"
                :inputBorder="false"
                placeholder="请输入"
                placeholderStyle="color: #888888;text-align:right;"
              />
            </uni-forms-item>
          </view>
        </s-card>
        <s-card>
          <view class="no-margin">
            <uni-forms-item name="applicationItemsDetail">
              <uni-easyinput
                v-model="formData.applicationItemsDetail"
                type="textarea"
                :inputBorder="false"
                placeholder="请输入"
                placeholderStyle="color: #888888;"
              />
            </uni-forms-item>
          </view>
        </s-card>
        <s-card style="padding: 0">
          <view class="no-margin" style="padding: 24rpx">
            <uni-forms-item
              label="用章类型"
              name="stampType"
              required
              label-width="80"
            >
              <s-picker
                v-model="formData.stampType"
                @change="change($event, 'stampType')"
                :dataSet="stampType"
                keys="key"
                label="label"
              ></s-picker>
            </uni-forms-item>
          </view>
          <view style="height: 2rpx; background: #e8e8e8"></view>
          <view class="no-margin" style="padding: 24rpx">
            <uni-forms-item
              label="证明类型"
              name="type"
              required
              label-width="80"
            >
              <s-picker
                v-model="formData.type"
                @change="change($event, 'type')"
                :dataSet="type"
                keys="key"
                label="label"
              ></s-picker>
              <!-- <uni-data-picker :localdata="array" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker> -->
            </uni-forms-item>
          </view>
        </s-card>
      </uni-forms>
      <button
        type="primary"
        @click="submit()"
        style="margin: 348rpx 24rpx 0 24rpx; background-color: #02b494"
      >
        下一步
      </button>
    </s-content>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      rules: {
        applicationItems: {
          rules: [
            {
              required: true,
              errorMessage: "申请事项不能为空",
            },
          ],
        },
        stampType: {
          rules: [
            {
              required: true,
              errorMessage: "用章类型不能为空",
            },
          ],
        },
        type: {
          rules: [
            {
              required: true,
              errorMessage: "证明类型不能为空",
            },
          ],
        },
      },
      stampType: [{ key: "纸质章", label: "纸质章" }],
      type: [
        { key: 1, label: "死亡证明" },
        { key: 2, label: "户籍证明" },
        { key: 3, label: "困难证明" },
        { key: 4, label: "分户证明" },
        { key: 5, label: "家庭成员证明" },
      ],
    };
  },
  methods: {
    change(value, code) {
      this.$refs.form.setValue(code, value.Selected.key);
    },
    submit() {
      const typeUrl = {
        1: "/amenity/pages/form/death", // 死亡
        2: "/amenity/pages/form/census", // 户籍证明
        3: "/amenity/pages/difficulty/index", // 困难证明
        4: "/amenity/pages/household/index", // 分户证明
        5: "/amenity/pages/family/index", // 家庭成员证明
      };
      this.$refs.form.validate().then((res) => {
        uni.navigateTo({
          url: `${typeUrl[res.type]}?params=${JSON.stringify(res)}`,
        });
      });
    },
  },
};
</script>

<style lang="scss">
.no-margin {
    .uni-forms-item {
        margin-bottom: 0;
    }
    .uni-forms-item__error {
        top: 25%;
    }
    .picker-text {
        color: #888888;
    }

}
</style>
